<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 1 .stop的修饰符作用 -->
        <div @click="divclick">
            啊啊啊啊
            <button @click.stop @click="btnclick">按钮</button>
        </div>
        <!-- 2 .prevent的使用 -->
        <br>
        <form action="百度">
            <input type="submit" value="提交" @click="subclick" @click.prevent>
        </form>
        <!-- 3 监听键盘键帽 -->
        <br>
        <input type="text" @keyup="upclick">
        <!-- 4 once的使用 -->
        <button @click.once="onclick">按钮</button>
    </div>
</body>
<script src='../js/vue.js'></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
             msg:'hello vue.js'
        },
        methods: {
            divclick(){
                console.log('divclick')
            },
            btnclick(){
                console.log('btnclick')
            },
            subclick(){
                console.log('subclick');
            },
            upclick(){
                console.log('upclick');
            },
            onclick() {
                console.log('onclick')
            }
        }
    })
</script>
</html>